<template>
  <div class="container">
    <div class="chart">
      <chart :options="orgOptions" :auto-resize="true" style="width: 60vw;height:450px;"/>
    </div>
  </div>
</template>

<script>
import 'echarts/lib/chart/bar'
export default {
  name: 'BarChart',
  filters: {
    // 123
  },
  data() {
    return {
      orgOptions: {}
    }
  },
  created() {
    var xAxisData = []
    var data1 = []
    var data2 = []
    for (var i = 0; i < 100; i++) {
      xAxisData.push('类目' + i)
      data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
      data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5)
    }
    this.orgOptions = {
      title: {
        text: '柱状图动画延迟'
      },
      legend: {
        data: ['bar', 'bar2'],
        align: 'left'
      },
      toolbox: {
        // y: 'bottom',
        feature: {
          magicType: {
            type: ['stack', 'tiled']
          },
          dataView: {},
          saveAsImage: {
            pixelRatio: 2
          }
        }
      },
      tooltip: {},
      xAxis: {
        data: xAxisData,
        silent: false,
        splitLine: {
          show: false
        }
      },
      yAxis: {
      },
      series: [{
        name: 'bar',
        type: 'bar',
        data: data1,
        animationDelay: function(idx) {
          return idx * 10
        }
      }, {
        name: 'bar2',
        type: 'bar',
        data: data2,
        animationDelay: function(idx) {
          return idx * 10 + 100
        }
      }],
      animationEasing: 'elasticOut',
      animationDelayUpdate: function(idx) {
        return idx * 5
      }
    }
  },
  methods: {
    // 方法
  }
}
</script>

<style scoped>
.container {
  background-color: #fff;
  padding: 30px 20px 20px 20px;
  height: 80vh;
}
.chart {
  border: 1px solid rgba(0, 0, 0, .1);
  width: 60vw;
  margin: 0 auto;
  box-shadow: 0 0 50px #ccc;
  padding: 10px;
  border-radius: 2%;
}
</style>
